[[ define "contact/index.html" ]]
<!-- 如果多级目录中的文件名相同时，需要在html文件中声明一下别名，供后端发送html()时使用，避免加载模板文件被替换掉-->

[[template "head" .]] <!-- 调用定义的公共头部模板文件 -->


<!-- 页面标题区域 -->
<section class="py-12 bg-gradient-to-r from-primary/10 to-secondary/10">
    <div class="container mx-auto px-4">
        <div class="text-center max-w-3xl mx-auto">
            <h1 class="text-4xl md:text-5xl font-bold text-base-content mb-6">联系我们</h1>
            <p class="text-xl text-base-content/70">期待与您沟通，共创美好未来</p>
        </div>
    </div>
</section>

<!-- 联系信息区域 -->
<section class="py-16 bg-base-100">
    <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
            <!-- 联系卡片网格 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
                <!-- 地址 -->
                <div class="flex items-start p-6 bg-base-100 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300">
                    <div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mr-4">
                        <i class="fa fa-users text-primary text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-base-content mb-2">公司地址</h3>
                        <p class="text-base-content/70 mb-2">北京市海淀区中关村科技园创新大厦A座15层</p>
                        <p class="text-base-content/60 text-sm">邮编：100080</p>
                    </div>
                </div>
                
                <!-- 电话 -->
                <div class="flex items-start p-6 bg-base-100 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300">
                    <div class="flex-shrink-0 w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center mr-4">
                        <i class="fa fa-users text-secondary text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-base-content mb-2">联系电话</h3>
                        <p class="text-base-content/70 mb-1">商务合作：400-123-4567</p>
                        <p class="text-base-content/70 mb-1">技术支持：400-123-4568</p>
                        <p class="text-base-content/70">客户服务：400-123-4569</p>
                    </div>
                </div>
                
                <!-- 邮箱 -->
                <div class="flex items-start p-6 bg-base-100 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300">
                    <div class="flex-shrink-0 w-12 h-12 rounded-full bg-accent/20 flex items-center justify-center mr-4">
                        <i class="fa fa-users text-accent text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-base-content mb-2">电子邮箱</h3>
                        <p class="text-base-content/70 mb-1">商务合作：business@[[ .官方网址 ]]</p>
                        <p class="text-base-content/70 mb-1">技术支持：support@[[ .官方网址 ]]</p>
                        <p class="text-base-content/70">人力资源：hr@[[ .官方网址 ]]</p>
                    </div>
                </div>
                
                <!-- 工作时间 -->
                <div class="flex items-start p-6 bg-base-100 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300">
                    <div class="flex-shrink-0 w-12 h-12 rounded-full bg-neutral/20 flex items-center justify-center mr-4">
                        <i class="fa fa-users text-neutral text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-base-content mb-2">工作时间</h3>
                        <p class="text-base-content/70 mb-1">周一至周五：09:00 - 18:00</p>
                        <p class="text-base-content/70 mb-1">周六：09:00 - 12:00</p>
                        <p class="text-base-content/70">周日及法定节假日休息</p>
                    </div>
                </div>
            </div>
            
            <!-- 社交媒体 -->
            <div class="text-center mb-12">
                <h3 class="text-2xl font-bold text-base-content mb-6">关注我们</h3>
                <div class="flex justify-center space-x-6">
                    <a href="#" class="w-14 h-14 rounded-full bg-blue-600 hover:bg-blue-700 flex items-center justify-center text-white transition-all duration-300 hover:scale-110" title="微信公众号">
                        <i class="fa fa-weixin text-xl"></i>
                    </a>
                    <a href="#" class="w-14 h-14 rounded-full bg-gray-800 hover:bg-black flex items-center justify-center text-white transition-all duration-300 hover:scale-110" title="GitHub">
                        <i class="fa fa-github text-xl"></i>
                    </a>
                    <a href="#" class="w-14 h-14 rounded-full bg-blue-500 hover:bg-blue-600 flex items-center justify-center text-white transition-all duration-300 hover:scale-110" title="微博">
                        <i class="fa fa-weibo text-xl"></i>
                    </a>
                    <a href="#" class="w-14 h-14 rounded-full bg-green-500 hover:bg-green-600 flex items-center justify-center text-white transition-all duration-300 hover:scale-110" title="知乎">
                        <i class="fa fa-weixin text-xl"></i>
                    </a>
                </div>
            </div>
            
           
            

        </div>
    </div>
</section>

<style>
/* 联系卡片悬停效果 */
.flex.items-start.p-6 {
    transition: all 0.3s ease;
}

.flex.items-start.p-6:hover {
    transform: translateY(-4px);
}

/* 社交媒体图标动画 */
.w-14.h-14.rounded-full {
    transition: all 0.3s ease;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 社交媒体图标悬停效果
    const socialIcons = document.querySelectorAll('.w-14.h-14.rounded-full');
    socialIcons.forEach(icon => {
        icon.addEventListener('mouseenter', function() {
            this.style.transform = 'scale(1.1) rotate(5deg)';
        });
        icon.addEventListener('mouseleave', function() {
            this.style.transform = 'scale(1) rotate(0deg)';
        });
    });
    
    // 联系卡片悬停效果
    const contactCards = document.querySelectorAll('.flex.items-start.p-6');
    contactCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-4px)';
        });
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });
});
</script>


[[template "foot" .]] <!-- 调用定义的公共底部模板文件 -->

[[end]]